<template>
  <div class="yearContainer">
    <p class="title">年度游客量对比</p>
    <img src="../../images/dataScreen-title.png" alt="">

    <!-- 图形图表的容器 -->
    <div class="charts" ref="year">

    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
// 获取DOM元素
let year = ref()

// 组件挂载完毕后
onMounted(() => {
  let mychart = echarts.init(year.value)
  // 设置配置项目
  mychart.setOption({
    title: {
      text: '散点图',
      left: '45%',
      textStyle: {
        color: 'white',
      }
    },
    xAxis: {
      type: 'category',
      show: false, // 隐藏x轴
    },
    yAxis: {
      show: false, // 隐藏y轴
    },
    grid: {
      left: 40,
      right: 20,
      top: 20,
      bottom: 20
    },
    series: {
      type: 'scatter',
      data: [33, 88, 216, 653, 788, 1024, 1234,1231,780, 256],
      // 标记图形的设置
      symbol: 'diamond',
      symbolSize: 16,
      // 图文标签
      label: {
        show: true,
        position: 'top',
        fontWeight: 'bold',
        color: 'yellowgreen'
      },
      // 散点图形样式
      itemStyle: {
        color: 'cyan'
      }
    }
  })
})

</script>
<style scoped lang="scss">
.yearContainer {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;

  .title {
    color: white;
    font-size: 20px;
  }

  .charts {
    height: calc(100% - 30px); // 如果charts不设置高度，图表的标题将无法展示出来
  }
}
</style>